<template>
    <el-dialog
        v-model="isShow"
        :align-center="true"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        title="修改密码"
        class="dialog-box"
        @close="onCloseDialog"
    >
        <el-scrollbar max-height="450px">
            <el-form label-width="100" ref="formRef" :model="passwordForm" :rules="rules">
                <el-form-item prop="oldPassword" label="旧密码">
                    <el-input type="password" show-password v-model="passwordForm.oldPassword" placeholder="请输入旧密码" clearable></el-input>
                </el-form-item>
                <el-form-item prop="newPassword" label="新密码">
                    <el-input type="password" show-password v-model="passwordForm.newPassword" placeholder="请输入新密码" clearable></el-input>
                </el-form-item>
                <el-form-item prop="newConfirmPassword" label="新确认密码">
                    <el-input
                        type="password"
                        show-password
                        v-model="passwordForm.newConfirmPassword"
                        placeholder="请输入新确认密码"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onConfirm" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { UpdatePasswordForm } from '@/api/auth/user/type'
import { FormInstance, FormRules } from 'element-plus'

// 是否显示dialog
const isShow = ref(false)
// 表单实例 Ref
const formRef = ref<FormInstance>()
const { admin } = useAdminStore()
// 表单初始数据
const initform: UpdatePasswordForm = {
    id: admin.id as number,
    oldPassword: '',
    newPassword: '',
    newConfirmPassword: '',
}
// 表单数据
const passwordForm = reactive<UpdatePasswordForm>({ ...initform })

// 表单校验规则
const rules = reactive<FormRules<UpdatePasswordForm>>({
    oldPassword: [
        {
            type: 'string',
            required: true,
            message: '旧密码不能为空',
            trigger: 'change',
        },
        {
            min: 6,
            message: '旧密码不能小于6位',
            trigger: 'change',
        },
    ],
    newPassword: [
        {
            required: true,
            message: '新密码不能为空',
            trigger: 'change',
        },
        {
            min: 6,
            message: '新密码不能小于6位',
            trigger: 'change',
        },
        {
            validator(rule, value, callback, source) {
                if (value.trim() === passwordForm.oldPassword) {
                    callback('新密码和旧密码不能一致')
                } else {
                    callback()
                }
            },
            trigger: 'change',
        },
    ],
    newConfirmPassword: [
        {
            required: true,
            message: '请填写新确认密码',
            trigger: 'change',
        },
        {
            validator(rule, value, callback, source) {
                if (value.trim() !== passwordForm.newPassword) {
                    callback('新确认密码和新密码不一致')
                } else {
                    callback()
                }
            },
            trigger: 'change',
        },
    ],
})

// 打开dialog
const onOpenDialog = () => {
    Object.assign(passwordForm, initform)
    isShow.value = true
}
// 关闭dialog
const onCloseDialog = () => {
    isShow.value = false
}
// 取消
const onCancel = () => onCloseDialog()
const router = useRouter()
const route = useRoute()
// 完成确认
const onConfirm = async () => {
    await formRef.value?.validate()

    const result = await updatePassword(passwordForm)
    if (result.isSuccess) {
        router.push({ path: '/login', query: { redirect: route.path } })
        ElMessage.success('修改成功，请重新登录')
    } else {
        ElMessage.error('修改失败')
    }
}
defineExpose({
    onOpenDialog,
})
</script>

<style lang="scss" scoped></style>
